import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import TextInput from 'rax-textinput';

function Device() {

    const [phoneNumber,setPhone] = useState('');
    const [sms,setSms] = useState('');
    const [locationMsg,setLocationMsg] = useState('');
    const [deviceIde, setDeviceIde]  = useState('');
    const [networkType, setNetType] = useState('');
    const [text,setText] = useState('');

    //初始化jsbridge
    const excuteBridge = () => {
    
        ZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
        })
      }

    // 呼叫手机
    const callPhone = () =>{
        excuteBridge();

        console.log('****  begin callPhone() phoneNumber:  ' + phoneNumber );
        ZWJSBridge.phoneCall({ 
            corpId: phoneNumber
            }).then((result) => { 
                console.log('#### ZWJSBridge.phoneCall() log. ####')
                console.log(result);
                }).catch((error) => { 
                    console.log('#### ZWJSBridge.phoneCall() error. ####')
                    console.log(error);
                });

        console.log('****  exit callPhone() ');
    }

    //发送短信
    const sendSms = () => {
        excuteBridge();

        console.log('****  begin sendSms() phoneNumber:  ' + phoneNumber  + '   , sms: @@@@@' + sms );
        ZWJSBridge.sms({ 
            phoneNumber:phoneNumber, 
            text:sms
            }).then((result) => { 
                console.log('#### ZWJSBridge.sms() log. result:  ' + result);
            }).catch((error) => { 
                console.log('#### ZWJSBridge.sms() error. error:  ' + error);
            });
        console.log('****  exit sendSms() ****');
    }

    //获取位置信息
    const getLocationMsg = () => {
        excuteBridge();
        console.log('**** begin getLocationMsg() ****');
        ZWJSBridge.getLocation() .then((result) => { 
            console.log('#### ZWJSBridge.getLocation() log. result:  ' + result);

            try {
                    // 将对象转化为字符串
                var resultStr = JSON.stringify(result);
                console.log('#### transfer to String , resultStr：  ' + resultStr);
                setLocationMsg(resultStr);
            } catch(error){
                console.log('####  transfer failed. error:  '  + error);
            }
        }).catch((error) => { 
            console.log('#### ZWJSBridge.getLocation() error:  ' + error);
        });
    }

    //获取网络唯一标识
    const getDeviceUuid = () => {
        excuteBridge();
        console.log('**** begin getDeviceUuid() ****');
        ZWJSBridge.getUUID().then((data) => { 

            console.log('#### ZWJSBridge.getUUID() log. uuid:  ' + data.uuid);
            setDeviceIde(data.uuid);
        }).catch((error) => { 
            console.log('#### ZWJSBridge.getUUID() error:  ' + error );
        });

        console.log('**** exit getDeviceUuid() ****');
    }

    //获取网络类型
    const getNetType = () => {
        excuteBridge();
        console.log('**** begin getNetType() ****');
        ZWJSBridge.getNetworkType().then((data) => { 
            console.log('#### ZWJSBridge.getNetworkType() log. netWorkType:  ' + data.result);
            setNetType(data.result);
        }).catch((error) => { 
            console.log('#### ZWJSBridge.getNetworkType() error:   ' + error);
        });
    }

    //复制内容到剪贴板
    const doCopy = () => {
        excuteBridge();
        console.log('**** begin doCopy() ****');
        ZWJSBridge.setClipboardData({ 
            text: text
        }).then((result) =>{
            console.log('#### ZWJSBridge.setClipboardData() log.result:   ' + result);
            alert("成功复制到剪贴板！");
        }).catch(error => { 
            console.log('#### ZWJSBridge.setClipboardData() error.error:  ' + error);
            alert("复制内容到剪贴板失败");
        });
        console.log('**** exit doCopy() ****');
    }

    
  return (
    <View>
          <div>
          <h1 style={{textAlign:'center',color:'white'}}>7.欢迎来到Device设备页</h1>
              <div>
                    <h2>7.1  打电话</h2>
                    <h5 style={{textAlign:'justify',color:'blue'}}>请输入手机号码:</h5>
                    <TextInput value={phoneNumber}
                                onChangeText={text => setPhone(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
                    <div>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </div>

                        <button onClick={() => {callPhone()}}
                                style={{
                                    width: 160,
                                    height: 40,
                                    backgroundColor: 'grey',
                                    color: 'white',
                                    fontSize: 8
                                }}  
                        >开始呼叫</button>
              </div>
              
              <div>
                  <h2>7.2  发短信</h2>
                  <h5 style={{textAlign:'justify',color:'blue'}}>请输入手机号码:</h5>
                  <TextInput value={phoneNumber}
                                onChangeText={text => setPhone(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
                    <h5 style={{textAlign:'justify',color:'blue'}}>请输入短信内容:</h5>
                    <TextInput value={sms}
                                onChangeText={text => setSms(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
                    <div>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </div>
                    <button 
                    onClick={() => sendSms()}
                    style={{
                        width: 160,
                        height: 40,
                        backgroundColor: 'grey',
                        color: 'white',
                        fontSize: 8
                    }}  
                    >发送短信</button>
              </div>

              <div>
                    <h2>7.3  获取经纬度信息</h2>
                    <button onClick={() => getLocationMsg()}
                            style={{
                                width: 160,
                                height: 40,
                                backgroundColor: 'grey',
                                color: 'white',
                                fontSize: 8
                            }}  
                    >获取位置信息</button>
                    <h5 style={{textAlign:'justify',color:'blue'}}>位置信息为:</h5>
                    <Text> { locationMsg } </Text>
              </div>

              <div>
                  <h2>7.4  获取设备唯一标识</h2>
                  <button onClick={() => getDeviceUuid()}
                            style={{
                                width: 160,
                                height: 40,
                                backgroundColor: 'grey',
                                color: 'white',
                                fontSize: 8
                            }}  
                  >获取设备标识</button>
                  <h5 style={{textAlign:'justify',color:'blue'}}>设备唯一标识为:</h5>
                  <Text>{ deviceIde }</Text>
              </div>

               <div>
                  <h2>7.5  获取网络类型</h2>
                  <button onClick={() => getNetType()}
                            style={{
                                width: 160,
                                height: 40,
                                backgroundColor: 'grey',
                                color: 'white',
                                fontSize: 8
                            }}  
                  >获取网络类型</button>
                  <h5 style={{textAlign:'justify',color:'blue'}}>网络类型为:</h5>
                  <Text>{ networkType }</Text>
              </div>
              
              <div>
                  <h2>7.6  剪切板</h2>
                  <h5 style={{textAlign:'justify',color:'blue'}}>请输入要复制到剪切板的内容:</h5>
                  <TextInput value={text}
                                onChangeText={text => setText(text)}
                                style={{
                                    width: 600,
                                    height: 200,
                                    borderWidth: 1,
                                    borderColor: '#dddddd',
                                    borderStyle: 'solid'
                                }}
                    ></TextInput>
                    <div>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </div>
                  <button onClick={() => doCopy()}
                            style={{
                                width: 160,
                                height: 40,
                                backgroundColor: 'grey',
                                color: 'white',
                                fontSize: 8
                            }}  
                  >复制到剪切板</button>
              </div>

              <div>
              </div>
             
          </div>
    </View>
  );
}

export default Device;
